<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #game{
            width: 340px;
            height: 400px;
            background-color: #b7d4a8;
            border: 10px solid black;
            border-radius: 20px;
            margin: 50px auto;
            display: flex;
            flex-flow: column;
            justify-content: space-around;
            align-items: center;
        }
        #stage{
            width: 300px;
            height: 300px;
            border: 2px solid black;
            position: relative;
        }
        #score-wrapper{
            width: 300px;
            display: flex;
            justify-content: space-between;
            font: bold 20px courier;
        }
        #snake > div{
            width: 10px;
            height: 10px;
            background-color: black;
            box-sizing: border-box;
            border: 1px #b7d4a8 solid;
            position: absolute;
        }
        #food{
            width: 10px;
            height: 10px;
            position: absolute;
            top: 30px;
            left: 20px;
        }
        #food > div{
            float: left;
            width: 5px;
            height: 5px;
            background-color: pink;
            transform: rotateZ(45deg);
            border-radius: 2px;
        }
    </style>
    <script>
        window.onload = function(){
            // 控制蛇的移动
            // 获取蛇的容器
            const snake = document.getElementById('snake');
            // 获取蛇的身体
            const snakeBody = snake.getElementsByTagName('div');
            // 获取食物
            const food = document.getElementById('food');
            // 获取蛇头
            const snakeHead = snakeBody[0];
            // 获取舞台
            const stage = document.getElementById('stage');
            // 获取分数容器
            const scoreSpan = document.getElementById('score');
            // 获取等级容器
            const levelSpan = document.getElementById('level');
            // 创建两个变量记录分数和等级
            let score = 0;
            let level = 1;
            // 创建一个变量表示蛇的移动方向
            let dir = null;
            // 创建一个正则表达式
            let keyRe = /Up|Down|Left|Right/;
            // 绑定按键事件
            document.addEventListener('keydown', function(event){
                // 清除默认样式
                event.preventDefault();
                if(keyRe.test(event.key)){
                    // 设置方向
                    dir = event.key;
                }
               
            }); 
            // 开启定时器控制蛇的移动
            setTimeout(function main(){
                // 获取蛇头的位置
                let left = snakeBody[0].offsetLeft;
                let top =snakeBody[0].offsetTop;
                switch(dir){
                    case 'ArrowUp':
                    case 'Up':
                        // 上
                        top -= 10;
                        if(snakeBody[1] && snakeBody[1].offsetTop === top){
                            top +=20;
                        }
                        break;
                    case 'ArrowDown':
                    case 'Down':
                        // 下
                        top += 10;
                        if(snakeBody[1] && snakeBody[1].offsetTop === top){
                            top -=20;
                        }
                        break;
                    case 'ArrowLeft':
                    case 'Left':
                        // 左
                        left -= 10;
                        if(snakeBody[1] && snakeBody[1].offsetLeft === left){
                            left +=20;
                        }
                        break;
                    case 'ArrowRight':
                    case 'Right':
                        // 右
                        left += 10;
                        if(snakeBody[1] && snakeBody[1].offsetLeft === left){
                            left -=20;
                        }
                        break;
                }
                 // 创建函数 重新生成食物
                 function newFood(){
                    food.style.left = Math.floor(Math.random()*25) * 10 + 'px';
                    food.style.top = Math.floor(Math.random()*25) * 10+ 'px';
                };
                
                // 判断是否吃到食物
                if(food.offsetTop === top && food.offsetLeft === left){
                    // console.log(123);
                    // 吃到食物 蛇身体+1
                    const div = document.createElement('div');
                    snake.appendChild(div);
                    let a = Number(score.innerHTML);
                    // 调用newFood生成新食物
                    newFood();
                    // 修改分数
                    score++;
                    scoreSpan.innerHTML = score;
                    // 修改等级
                    if(level < 11 && score%2 === 0){
                        level++;
                    }
                    levelSpan.innerHTML= level;
                }
                
                // 判断蛇头有没有撞墙
                if(left<0 || left>290 || top<0 || top >290){
                    alert('Game Over!!!');
                    return;
                }
                
                // 移动蛇的身体
                for(let i=snakeBody.length-1; i>0; i--){
                    snakeBody[i].style.left = snakeBody[i-1].offsetLeft + 'px';
                    snakeBody[i].style.top = snakeBody[i-1].offsetTop + 'px';
                    if(left === snakeBody[i].offsetLeft && top === snakeBody[i].offsetTop){
                        alert('Game Over!!!');
                        return;
                    }
                }
                // 修改蛇头的位置
                snakeBody[0].style.left = left + 'px';
				snakeBody[0].style.top = top + 'px';
                
                // 函数执行完毕
                setTimeout(main, 330 - (level * 30));
            }, 300 - (level * 30));
        };
    </script>
</head>
<body>
    <div id="game">
        <div id="stage">
            <div id="snake">
                <div></div>
            </div>
            <div id="food">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div id="score-wrapper">
            <div>
                SCORE: <span id="score">0</span>
            </div>
            <div>
                LEVEL: <span id="level">1</span>
            </div> 
        </div>
    </div>
</body>
</html>